<template>
  <div>

    <div style="width: 200px;position: fixed;left: 9%" v-if="comparedList.length>0">
      <el-card class="box-card">
        <div slot="header" class="clearfix" style="text-align: center">
          <span>对比(<span style="font-size:14px;color: #007bff">最多4人</span>)</span>
        </div>
        <div v-for="(comparedItem,index) in comparedList" :key="index" style="text-align: center">
          <el-avatar :size="60" :src="comparedItem.comparedCircleUrl"></el-avatar>
          <p>{{ comparedItem.comparedUserName }}</p>
        </div>
        <el-button type="success" plain @click="goToCompared()">对比</el-button>
        <el-button type="danger" plain @click="clearCompared()">清空</el-button>
      </el-card>
    </div>


    <div style="width: 60%;margin: auto">

      <div style="width: 70%;float: left;">

        <el-card class="box-card" style="margin-bottom: 20px">
          <div style="width: 95%;margin:0 auto">

            <div id="character">
              <div style="width: 10%;float:left">
                <p style="font-weight: 600">角色</p>
              </div>
              <div style="width: 85%;float:left">
                <div>
                  <div class="listItem" style="height:50px;float:left;margin-right:20px;cursor:pointer"
                       v-for="item in characterList" :key="item" @click="getCharacterItem(item)">{{ item }}
                  </div>
                </div>
                <div style="clear:left;" v-if="characterListPlusStatus">
                  <div class="listItem" style="height:50px;float:left;margin-right:20px;cursor:pointer"
                       v-for="item in characterListPlus" :key="item" @click="getCharacterItem(item)">{{ item }}
                  </div>
                </div>
              </div>
              <div style="width: 5%;float:right">
                <p class="listP" v-if="!characterListPlusStatus" @click="characterListPlusStatus=true">更多</p>
                <p class="listP" v-if="characterListPlusStatus" @click="characterListPlusStatus=false">收起</p>
              </div>
            </div>


            <div id="location" style="clear: left">
              <div style="width: 10%;float:left">
                <p style="font-weight: 600">地点</p>
              </div>
              <div style="width: 85%;float:left">
                <div>
                  <div class="listItem" style="height:50px;float:left;margin-right:20px;cursor:pointer"
                       v-for="item in locationList" :key="item" @click="getLocationItem(item)">{{ item }}
                  </div>
                </div>
                <div style="clear:left;" v-if="locationListPlusStatus">
                  <div class="listItem" style="height:50px;float:left;margin-right:20px;cursor:pointer"
                       v-for="item in locationListPlus" :key="item" @click="getLocationItem(item)">{{ item }}
                  </div>
                </div>
              </div>
              <div style="width: 5%;float:right">
                <p class="listP" v-if="!locationListPlusStatus" @click="locationListPlusStatus=true">更多</p>
                <p class="listP" v-if="locationListPlusStatus" @click="locationListPlusStatus=false">收起</p>
              </div>
            </div>

            <div id="workingWay" style="clear: left">
              <div style="width: 10%;float:left">
                <p style="font-weight: 600">方式</p>
              </div>
              <div style="width: 85%;float:left">
                <div class="listItem" style="height:50px;float:left;margin-right:20px;cursor:pointer"
                     v-for="item in workingWayList" :key="item" @click="getWorkingWayItem(item)">{{ item }}
                </div>
              </div>
            </div>

            <div id="sort" style="clear: left">
              <div style="width: 10%;float:left">
                <p style="font-weight: 600">排序</p>
              </div>
              <div style="width: 85%;float:left">
                <div class="listItem" style="height:50px;float:left;margin-right:20px;cursor:pointer"
                     v-for="item in sortList" :key="item" @click="getSortItem(item)">{{ item }}
                </div>
              </div>
            </div>

            <div style="clear: left">
              <el-divider></el-divider>
              <span> 您当前的位置：
              <span class="positionSpan"> {{ nowCharacter }} </span> >
              <span class="positionSpan"> {{ nowLocation }} </span> >
              <span class="positionSpan"> {{ nowWorkingWay }} </span> >
              <span class="positionSpan"> {{ nowSort }} </span>
            </span>
            </div>

          </div>
        </el-card>
        <div class="programmerList">
          <ProgrammerComponents
              @toCompared="getCompared"
              @toInfoMain="getInfoMain"
              v-for="data in dataList"
              :key="data.id"
              :data="data">
          </ProgrammerComponents>
        </div>
        <el-card class="box-card">
          <el-pagination style="margin-top: 20px"
                         @current-change="handleCurrentChange"
                         background
                         layout="prev, pager, next"
                         :total=total>
          </el-pagination>
        </el-card>

      </div>

      <div style="width:28%;float: right;">

        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix"><span>发布任务</span></div>
          <p style="font-size: 14px">企业点击发布任务，工程师会在任务下报名，招聘专员也会在1小时内与您联系，1小时内精准确定人才</p>
          <el-button type="primary" style="width: 100%" @click="$router.push('/task')">点击发布任务</el-button>
        </el-card>

        <el-card class="box-card" style="margin-bottom: 20px">
          <div slot="header" class="clearfix"><span>完善简历</span></div>
          <p style="font-size: 14px">工程师完善技术能力和项目经验，更易接到订单</p>
          <el-button type="success" style="width: 100%" @click="$router.push('/userLoginMain/infoMain')">点击完善简历
          </el-button>
        </el-card>

        <el-card class="box-card">
          <div slot="header" class="clearfix"><span>微信推送</span></div>
          <p style="font-size: 14px">关注IT帮微信平台，接收实时职位推送</p>
          <img :src=imgUrl alt="" style="width:135px;height:120px;float: left">
          <img :src=imgUrl alt="" style="width:135px;height:120px;float: right">
          <div style="width: 85%;margin: auto;">
            <span style="float: left;font-size: 14px">微信平台推送</span>
            <span style="float: right;font-size: 14px">工程师端客服</span>
          </div>
        </el-card>
      </div>
    </div>
  </div>

</template>

<script>
import ProgrammerComponents from "@/components/user/Components/Components/ProgrammerComponents";

export default {
  name: "acceptTask",
  data() {
    return {
      imgUrl: 'https://masteryan.oss-cn-beijing.aliyuncs.com/DT%29VHTX4%7BR0_J3B%29N5SBW89.png',
      characterList: ['全部', '项目经理', '设计师', '前端', '移动端', '小程序', '后端', '运维'],
      characterListPlus: ['游戏', '测试', 'DBA', '产品经理', '其他'],
      characterListPlusStatus: false,
      locationList: ['全部', '北京', '上海', '广州', '深圳', '杭州', '成都', '武汉', '山东'],
      locationListPlus: ['西安', '天津', '重庆', '南京', '长沙', '苏州', '厦门', '福州', '其他'],
      locationListPlusStatus: false,
      workingWayList: ['全部', '远程', '驻场', '远程+驻场'],
      sortList: ['默认', '评分升序', '评分降序', '价格升序', '价格降序'],
      nowCharacter: '全部',
      nowLocation: '全部',
      nowWorkingWay: '全部',
      nowSort: '默认',

      dataList: [],
      comparedList: [],
      total: 0,
    }
  },
  methods: {
    getCompared(data) {
      let flag = true;
      if (this.comparedList.length < 4) {
        for (let i = 0; i < this.comparedList.length; i++) {
          if (this.comparedList[i].comparedUserId === data.userId) {
            flag = false;
          }
        }
        if (flag) {
          let newObj = {}
          newObj.comparedUserId = data.userId
          newObj.comparedCircleUrl = data.imageUrl
          newObj.comparedUserName = data.nickName
          this.comparedList.push(newObj)
        }
      }
    },
    getInfoMain(data) {
      this.$router.push({
        path: "/userLoginMain/userInfoMain",
        query: {userId: data}
      })
    },
    goToCompared() {
      if (this.comparedList.length >= 2) {

        this.$router.push({
          path: "/userLoginMain/compared",
          query: {dataList: this.comparedList}
        })

      }
    },
    clearCompared() {
      this.comparedList = []
    },

    getCharacterItem(item) {
      this.nowCharacter = item
      this.conditionQuery()
    },
    getLocationItem(item) {
      this.nowLocation = item
      this.conditionQuery()
    },
    getWorkingWayItem(item) {
      this.nowWorkingWay = item
      this.conditionQuery()
    },
    getSortItem(item) {
      this.nowSort = item
      this.conditionQuery()
    },

    async conditionQuery() {
      let workWay = this.getWorkWayNum()
      let list = this.getIdsNum()
      const {data: res} = await this.$http.get('/programmerList/listProByCondition', {
        params: {
          programmerCareer: this.nowCharacter === '全部' ? "" : this.nowCharacter,
          workPlace: this.nowLocation === '全部' ? "" : this.nowLocation,
          workWay: workWay,
          list: list,
          pageNum: 1,
          pageSize: 10
        }
      })

      this.total = res.content.total
      this.dataList = []
      this.dataList = res.content.list
    },
    async handleCurrentChange(newPage) {
      let workWay = this.getWorkWayNum()
      let list = this.getIdsNum()
      const {data: res} = await this.$http.get('/programmerList/listProByCondition', {
        params: {
          programmerCareer: this.nowCharacter === '全部' ? "" : this.nowCharacter,
          workPlace: this.nowLocation === '全部' ? "" : this.nowLocation,
          workWay: workWay,
          list: list,
          pageNum: newPage,
          pageSize: 10
        }
      })

      this.total = res.content.total
      this.dataList = []
      this.dataList = res.content.list
    },
    async initList() {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        target: document.querySelector('.programmerList')
      })
      try {
        const {data: res} = await this.$http.get('/programmerList/listProByCondition', {
          params: {
            programmerCareer: '',
            workPlace: '',
            workWay: '',
            list: '',
            pageNum: 1,
            pageSize: 10
          }
        })

        this.total = res.content.total
        this.dataList = []
        this.dataList = res.content.list
      } catch (error) {
        error.message
      }
      loading.close()

    },
    getWorkWayNum() {
      switch (this.nowWorkingWay) {
        case "全部":
          return ""
        case "远程":
          return 1
        case "驻场":
          return 2
        case "远程+驻场":
          return 3
      }
    },
    getIdsNum() {
      switch (this.nowSort) {
        case "默认":
          return ""
        case "评分升序":
          return 1
        case "评分降序":
          return 2
        case "价格升序":
          return 3
        case "价格降序":
          return 4
      }
    }
  },
  mounted() {
    this.initList()
  },
  components: {
    ProgrammerComponents
  }
}
</script>

<style scoped>
.listItem:hover {
  color: #007bff;
}

.listP {
  color: #28a745;
  cursor: pointer
}

.positionSpan {
  color: #007bff;
}

</style>